<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 说明及新增试题按钮 -->
        <div class="btn_wrapper">
          <span class="title">说明：目前支持学科和关键字条件筛选</span>
          <el-button
            size="small"
            type="success"
            @click="$router.push('/questions/new')"
          >
            <i class="el-icon-edit"></i>
            新增试题</el-button
          >
        </div>
        <!-- 表单区域 -->
        <el-form ref="form" :model="form" label-width="80px" size="small">
          <el-row class="inline-info">
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select
                  v-model="form.subjectID"
                  placeholder="请选择"
                  @change="changeFn"
                  @blur="blurFn"
                >
                  <el-option
                    v-for="item in subSimpleList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select v-model="form.catalogID" placeholder="请选择">
                  <el-option
                    v-for="item in directorysList"
                    :key="item.id"
                    :label="item.directoryName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select v-model="form.tags" placeholder="请选择">
                  <el-option
                    v-for="item in tagsList"
                    :key="item.id"
                    :label="item.tagName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  v-model="form.keyword"
                  placeholder="根据题干搜索"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="inline-info">
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select v-model="form.questionType" placeholder="请选择">
                  <el-option
                    v-for="item in questionType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="难度">
                <el-select v-model="form.difficulty" placeholder="请选择">
                  <el-option
                    v-for="item in difficulty"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select v-model="form.direction" placeholder="请选择">
                  <el-option
                    v-for="item in direction"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select v-model="form.creatorID" placeholder="请选择">
                  <el-option
                    v-for="item in creatorList"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row class="inline-info">
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="form.shortName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-select
                  v-model="form.province"
                  placeholder="请选择"
                  @change="changeCity"
                >
                  <el-option
                    v-for="item in provincesList"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
                <el-select v-model="form.city" placeholder="请选择">
                  <el-option
                    v-for="item in citysList"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-form-item class="button">
              <el-button @click="clearForm">清除</el-button>
              <el-button type="primary" @click="searchFn">搜索</el-button>
            </el-form-item>
          </el-row>
        </el-form>

        <!-- 温馨请示 -->
        <el-alert
          :title="`数据一共 ${total} 条`"
          type="info"
          :closable="false"
          show-icon
        >
        </el-alert>

        <!-- 表格区域 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="number" label="试题编号"> </el-table-column>
          <el-table-column prop="subject" label="学科"> </el-table-column>
          <el-table-column prop="catalog" label="目录"> </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            :formatter="formatterQueType"
          >
          </el-table-column>
          <el-table-column label="题干">
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | dayTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            label="难度"
            :formatter="formatterDiff"
          >
          </el-table-column>
          <el-table-column prop="creator" label="录入人"> </el-table-column>
          <el-table-column prop="address" label="操作" width="200px">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-view"
                circle
                plain
                @click="showArtiVie(scope.row)"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-edit"
                circle
                plain
                @click="$router.push('/questions/new?id='+scope.row.id)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                plain
                @click="delArt(scope.row)"
              ></el-button>
              <el-button
                type="warning"
                icon="el-icon-check"
                circle
                plain
                @click="removeArt(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.form.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="this.form.pagesize"
          layout=" prev, pager, next,sizes,jumper"
          :total="total"
        >
        </el-pagination>

        <!-- 题目预览区域 -->
        <el-dialog
          title="題目预览"
          :visible.sync="showArtVie"
          width="50%"
          :close-on-press-escape="false"
          :close-on-click-modal="false"
        >
          <ArticleViews ref="articleView" v-if="showArtVie" :articleId="articleId" />
           <span slot="footer" class="dialog-footer">
               <el-button type="primary" @click="showArtVie=false">取消</el-button>
           </span>
        </el-dialog>

      </el-card>
    </div>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { list } from '@/api/hmmm/directorys'
import { list1 } from '@/api/hmmm/tags'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
import { simple1 } from '@/api/base/users.js'
import { listTable, remove, choiceAdd } from '@/api/hmmm/questions'
import dayjs from 'dayjs'
import ArticleViews from './companys/articleViews'

export default {
  name: 'questions',
  components: {
    ArticleViews
  },
  data () {
    return {
      form: {
        page: 1, // 1 当前页数
        pagesize: 5, // 10 页尺寸
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: null, // 录入人
        catalogID: null // 目录
      },
      subSimpleList: [], // 学科列表
      directorysList: [], // 目录列表
      tagsList: [], // 标签列表
      questionType: questionType, // 题型
      difficulty: difficulty, // 难度
      direction: direction, // 方向
      provincesList: provinces(), // 城市
      citysList: [], // 城市下地区
      creatorList: [],
      tableData: [], // 表格数据
      total: 0,
      showArtVie: false,
      articleId: ''
    }
  },
  created () {
    // 获取所有学科
    this.getSubList()
    // 获取录入员
    this.getPeople()
    // 获取所有基础题库
    this.listTable()
  },
  // 格式化时间
  filters: {
    dayTime (value) {
      return dayjs(value).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  methods: {
    // 加入/取消精选题库--待审核
    async removeArt (row) {
      const confirmRes = await this.$confirm('此操作将该题目加入精选, 是否继续?, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).catch(async err => err)
      if (confirmRes === 'confirm') {
        // 发请求
        await choiceAdd({ id: row.id, choiceState: 1 })
        // 成功提示
        this.$message.success('加入精选题库成功')
        // 跳转到精选题库
        this.$router.push('/questions/choice')
      }
    },
    // 删除题目
    async delArt (row) {
      const confirmRes = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(async err => err)
      if (confirmRes === 'confirm') {
        await remove({ id: row.id })
        // 判断是否是当前页的最后一条数据
        if (this.tableData.length === 1) {
          this.form.page--
          if (this.form.page <= 1) {
            this.form.page = 1
          }
        }
        // 成功提示
        this.$message.success('删除成功!')
        // 刷新列表
        this.listTable()
      }
    },
    // 是否展示题目详情
    showArtiVie (row) {
      this.showArtVie = true
      this.articleId = row.id
    },
    // 点击搜索按钮
    async searchFn () {
      const res = await listTable({ subjectID: this.form.subjectID, keyword: this.form.keyword })
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 将题型转换成正常的汉字
    formatterQueType (row, column, cellValue, index) {
      // 如果后台返回的是1,2,3,就进行转换
      const valueList = questionType.find(
        (item) => item.value === Number(cellValue)
      )
      if (cellValue === '1' || cellValue === '2' || cellValue === '3' || cellValue === 1 || cellValue === 2 || cellValue === 3) {
        return valueList.label
      } else {
        return cellValue
      }
    },
    // 将难度转换成正常的汉字
    formatterDiff (row, column, cellValue, index) {
      const valueList = difficulty.find(
        (item) => item.value === Number(cellValue)
      )
      if (cellValue === '1' || cellValue === '2' || cellValue === '3' || cellValue === 1 || cellValue === 2 || cellValue === 3) {
        return valueList.label
      } else {
        return cellValue
      }
    },
    // 获取所有基础题库列表
    async listTable () {
      const res = await listTable({
        page: this.form.page,
        pagesize: this.form.pagesize
      })
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 点击清除按钮,清除表单数据
    clearForm () {
      this.form = {
        page: 1, // 1 当前页数
        pagesize: 5, // 10 页尺寸
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: '', // 标签名称
        province: '', // 企业所在地省份
        city: '', // 企业所在城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: null, // 录入人
        catalogID: null // 目录
      }
      this.$refs.form.resetFields()
      // 获取所有基础题库
      this.listTable()
      this.directorysList = []
      this.tagsList = []
      this.citysList = []
    },
    // 获取录入员
    async getPeople () {
      const res = await simple1({ keyword: this.form.keyword })
      this.creatorList = res.data
    },
    // 获取下级城市
    changeCity (city) {
      this.citysList = citys(city)
    },
    // 获取所有学科列表
    async getSubList () {
      const res = await simple()
      this.subSimpleList = res.data
    },
    // 点击学科发起获取目录请求和获取标签请求
    async changeFn (id) {
      // 获取目录请求
      const res = await list({ subjectID: id })
      this.directorysList = res.data.items
      // 获取标签请求
      const resTag = await list1({ subjectID: id })
      this.tagsList = resTag.data.items
    },
    // 再次选中下拉菜单框,失去焦点,清除数据
    blurFn () {
      this.form.catalogID = ''
      this.form.tags = ''
    },
    // 分页改变每页数量组件事件
    handleSizeChange (size) {
      this.form.pagesize = size
      this.listTable()
    },
    // 改变当前页时间
    handleCurrentChange (pagesize) {
      this.form.page = pagesize
      this.listTable()
    }
  }
}
</script>

<style scoped>
.el-pagination {
  margin-top: 20px;
  float: right;
  margin-bottom: 200px;
}
.el-alert.el-alert--info.is-light {
  margin-bottom: 10px;
}
.button {
  float: right;
}
.title {
  font-size: 12px;
  color: pink;
}

.btn_wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

::v-deep .el-form-item__content {
  display: flex;
}
::v-deep .el-select.el-select--small {
  margin-right: 10px;
}
.el-select.el-select--small {
  width: 100%;
}
::v-deep .el-dialog__footer {
    display: flex;
    justify-content: center;
}
::v-deep .el-dialog__body {
    padding-bottom: 0;
}
::v-deep.el-table th {
  background-color: #fafafa;
}
::v-deep.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8
}
</style>
